﻿@{
    ViewBag.Title = "商品列表";
    Layout = null;
}

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale= 1.0, initial-scale= 1.0">
    <link href="~/Content/Style/conmon.css" rel="stylesheet" type="text/css">
    <link href="~/Content/fonts/iconfont.css" rel="stylesheet" type="text/css">

    <style>
        .summary .top {
            display: flex;
        }

            .summary .top .top_item {
                flex: 1;
                text-align: center;
                height: 40px;
                line-height: 40px;
                background-color: #fff;
                color: #000;
            }

                .summary .top .top_item.current {
                    color: #FFC256;
                }

        .rating-wrapper {
        }

            .rating-wrapper .rating-item {
                display: flex;
                border-bottom: 1px solid rgba(7, 17, 27, 0.1);
            }

                .rating-wrapper .rating-item .avatar {
                    flex: 0 0 150px;
                    width: 150px;
                    margin-right: 12px;
                }

                .rating-wrapper .rating-item .content_sum {
                    padding: 20px 0;
                    position: relative;
                    flex: 1;
                }

                    .rating-wrapper .rating-item .content_sum .name {
                        margin-bottom: 4px;
                        line-height: 12px;
                        font-size: 10px;
                        color: rgb(7, 17, 27);
                    }

                    .rating-wrapper .rating-item .content_sum .star-wrapper {
                        margin-bottom: 6px;
                        font-size: 0;
                    }

                        .rating-wrapper .rating-item .content_sum .star-wrapper .star {
                            display: inline-block;
                            margin-right: 6px;
                            vertical-align: top;
                        }

                        .rating-wrapper .rating-item .content_sum .star-wrapper .delivery {
                            display: inline-block;
                            vertical-align: top;
                            line-height: 12px;
                            font-size: 10px;
                            color: rgb(147, 153, 159);
                        }

                    .rating-wrapper .rating-item .content_sum .text {
                        margin-bottom: 8px;
                        line-height: 18px;
                        color: rgba(0,0,0,.54);
                        font-size: 12px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                    }

                    .rating-wrapper .rating-item .content_sum .recommend {
                        line-height: 16px;
                        font-size: 0;
                    }

                        .rating-wrapper .rating-item .content_sum .recommend .icon-thumb_up,
                        .rating-wrapper .rating-item .content_sum .recommend .item {
                            display: inline-block;
                            margin: 0 8px 4px 0;
                            font-size: 9px;
                        }

                        .rating-wrapper .rating-item .content_sum .recommend .icon-thumb_up {
                            color: rgb(0, 160, 220);
                        }

                        .rating-wrapper .rating-item .content_sum .recommend .item {
                            padding: 0 6px;
                            border: 1px solid rgba(7, 17, 27, 0.1);
                            border-radius: 1px;
                            color: rgb(147, 153, 159);
                            background: #fff
                        }

        .item_liBox {
            display: flex;
            flex-wrap: wrap;
        }

            .item_liBox .item_li {
                width: 25%;
                text-align: center;
            }

        .split {
            width: 100%;
            height: 16px;
            border-top: 1px solid rgba(7,17,27,0.1);
            border-bottom: 1px solid rgba(7,17,27,0.1);
            background: #f3f5f7;
        }

        .content .price {
            font-weight: 700;
            line-height: 24px;
        }

            .content .price .now {
                margin-right: 8px;
                font-size: 14px;
                color: #ff6000;
            }

            .content .price .old {
                text-decoration: line-through;
                font-size: 10px;
                color: rgb(147, 153, 159);
            }

        .content .title {
            padding-bottom: 12px;
        }

        .content .cartcontrol-wrapper {
            position: absolute;
            right: 12px;
            bottom: 12px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="summary">
            <div class="content_sum">
                <div>
                    <div class="rating-wrapper content">
                        <ul>
                            <li class="rating-item" v-for="i in listProductos">
                                <a :href="'/Classification/Summary?id='+ i.DishesID">
                                    <div class="avatar" @*v-if="i.DishesPicSmall"*@>
                                        @*<img width="150" height="120" :src="i.DishesPicSmall">*@
                                        <img :src="ChangeDishesPic(i.DishesPicSmall)" height="150" width="120" />
                                    </div>
                                </a>
                                <a :href="'/Classification/Summary?id='+ i.DishesID">
                                    <div class="content_sum">
                                        <h1 class="title">{{i.DishesNmae}}</h1>
                                        <p class="text">{{i.DishesTxt}}</p>
                                        <div class="price">
                                            <span class="now">￥{{i.DishesPay}}</span><span class="old">￥{{i.DishesMon}}</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <div class="footer_box">
                <div class="footer_li">
                    <a href="/">
                        <div class="footer-img">
                            <i class="iconfont icon-union" style="font-size: 28px;"></i>
                        </div>
                        <span>首页</span>
                    </a>
                </div>
                <div class="footer_li">
                    <a href="/Classification/Index">
                        <div class="footer-img">
                            <i class="iconfont icon-dingdan1" style="font-size: 28px;"></i>
                        </div>
                        <span>分类</span>
                    </a>
                </div>
                <div class="footer_li">
                    <a href="/ShoppingCart/Index">
                        <div class="footer-img">
                            <i class="iconfont icon-gouwuche4" style="font-size: 28px;"></i>
                        </div>
                        <span>购物车</span>
                    </a>
                </div>
                <div class="footer_li">
                    <a href="/Information/Index">
                        <div class="footer-img">
                            <i class="iconfont icon-wode1" style="font-size: 28px;"></i>
                        </div>
                        <span>个人中心</span>
                    </a>
                </div>
            </div>
        </footer>
    </div>

    <script src="~/Content/Script/jquery-1.8.3.min.js"></script>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue"></script>

    <script>
        Vue.config.productionTip = false;   //Vue去掉警告 You are running Vue in development mode
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    dada: 2,
                    currentIndex: 2,
                    listProductos: '',
                    number: [1, 2, 3, 4, 5, 6, 7, 8, 9],
                    items: [{
                        name: '详情',
                        active: false,
                    },
                    {
                        name: '参数',
                        active: false,
                    },
                    {
                        name: '评价',
                        active: false,
                    }]
                };
            },
            created() {
                var _this = this;
                var GetRequest = new GetRequest();
                function GetRequest() {
                    var url = location.search; //获取url中"?"符后的字串
                    var theRequest = new Object();
                    if (url.indexOf("?") != -1) {
                        var str = url.substr(1);
                        strs = str.split("&");
                        for (var i = 0; i < strs.length; i++) {
                            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                        }
                    }
                    return theRequest;
                }
                $.ajax({
                    url: "/Classification/Get_Order_DishesList",
                    type: "POST",
                    dataType: "json",
                    data: { DishesTypeID: GetRequest.id, YZM: '', RETID: 1 },
                    success: function (data) {
                        vm.listProductos = data.rows;
                        console.log(data);
                    }
                });
            },
            methods: {
                ChangeDishesPic(Pic) {
                    if (Pic == "" || Pic == null) {
                        Pic = "../../Content/images/testImages/暂无图片.jpg" //后台图片为空,设置为默认图片
                    }
                    return Pic;
                },
                aaa: function (index) {
                    this.dada = index;
                    this.currentIndex = index;
                }
            }
        });
    </script>
</body>
</html>
